<template>
  <div id="app" :style="{overflow:is_show_View?'hidden':'auto'}" ref="ttt">
    <keep-alive>
      <router-view :style="{paddingBottom:song_info.id?'50px':'0px'}" />
    </keep-alive>

    <transition name="offset">
      <!-- 根据仓库内 song_info 是否有 id 来表示用户是都点击了某一个 song.vue 组件
      进行播放-->
      <playerbar
        @click.native="show_playerview"
        v-show="song_info.id"
        @prev="prev_song"
        @next="next_song"
      ></playerbar>
    </transition>

    <!-- <播放页 @next="真正的上下首切换函数"></播放页> -->
    <transition name="fast">
      <playerview
        v-show="is_show_View"
        @close="is_show_View = false"
        @prev="prev_song"
        @next="next_song"
      ></playerview>
    </transition>
  </div>
</template>
<script>
let a = 10;
import playerbar from "./components/playerBar";
import playerview from "./components/playerView";
import { mapState } from "vuex";
export default {
  data() {
    return {
      is_show_View: false, // 控制是否展示播放页
    };
  },
  components: {
    playerbar,
    playerview,
  },
  computed: {
    ...mapState(["song_info", "play_list", "song_idx"]),
  },
  methods: {
    show_playerview() {
      console.log(1111);
      this.is_show_View = true;
    },
    prev_song() {
      console.log("切换至上一首", this.play_list[this.song_idx - 1]);
      let new_idx;
      if (this.song_idx == 0) {
        new_idx = this.play_list.length - 1;
      } else {
        new_idx = this.song_idx - 1;
      }
      let prev_id = this.play_list[new_idx];
      // 将 vuex 内的 下标更新为 最新的下标
      this.$store.commit("change_idx", new_idx);
      // 拿到id后进行歌曲播放,并且更新歌曲详情
      this.$audio.playSong(prev_id);
    },
    next_song() {
      console.log("切换至下一首");
      let new_idx;
      if (this.song_idx == this.play_list.length - 1) {
        new_idx = 0;
      } else {
        new_idx = this.song_idx + 1;
      }
      let next_id = this.play_list[new_idx];
      // 将 vuex 内的 下标更新为 最新的下标
      this.$store.commit("change_idx", new_idx);
      // 拿到id后进行歌曲播放,并且更新歌曲详情
      this.$audio.playSong(next_id);
    },
  },
};
</script>
<style lang="scss">
// 播放页动画
.fast-enter,
.fast-leave-to {
  transform: translateY(5%);
  opacity: 0;
}
.fast-enter-active,
.fast-leave-active {
  transition: all 0.2s;
}

// 播放控件动画
.offset-enter,
.offset-leave-to {
  transform: translateY(100%);
}
.offset-enter-active,
.offset-leave-active {
  transition: all 0.3s;
}
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}
#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
